<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>progress chart</title>
    <style type="text/css">
        html,body,#container{
            margin: 0;
            height: 100%;
        }
        #container{
            position: relative;
        }
        #canvas-container{
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        .canvas{
            margin: 10px;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="canvas-container">
            <div style="position: absolute;">
                <button id="btnDraw">DRAW</button>
                <button id="btnClear">Clear</button>

            </div>
            <canvas class="canvas" width="200" height="200"></canvas>
            <canvas class="canvas" width="200" height="200"></canvas>
            <canvas class="canvas" width="200" height="200"></canvas>
        </div>
    </div>
    <script type="text/javascript">
        var PC = function(element,skill){
            this.skill = {
                progress:skill.progress
            };

            this.canvas = element;
            this.context = this.canvas.getContext('2d');

            this.context.lineWidth = 20;
//            this.context.lineCap = 'round';
            this.context.shadowColor = "#999";
            this.context.shadowOffsetX = 0;
            this.context.shadowOffsetY = 0;
            this.context.shadowBlur = 5;
            this.context.fillStyle = "green";
            this.context.font = "bold 3em Arial";
            this.context.textAlign = "center";
            this.context.textBaseline = "middle";

            this.start_deg = -0.5;
            this.draw_deg = 2;
            this.deg = 0.01;
            this.speed = 10;
            this.position = {x:200/2,y:200/2};
            this._draw = function(position,radius,end){
                this.context.beginPath();
                this.context.arc(position.y,position.y,radius,this.start_deg * Math.PI,end,false);
                this.context.stroke();
                this.context.closePath();
            };

            this.timer = null;
            this.isOver = false;

            this._drawBase = function(){
                this.context.strokeStyle = '#CCC';
                this._draw(this.position,80, Math.PI * (1.5));
            };
            this._drawProgress = function(){
                var self = this;
                self.timer = setInterval(function(){
                    if(!self.isOver && self.draw_deg >= (2 / 100) * (100-self.skill.progress)){
                        self._clear();
                        self._drawBase();
                        self.context.strokeStyle = 'green';
                        self._draw(self.position, 80, Math.PI * (1.51 - self.draw_deg));
                        self.context.fillText(self.skill.progress + '%',self.position.x,self.position.y);
                        self.draw_deg -= self.deg;
                    }else{
                        clearInterval(self.timer);
                        self.timer = null;
                        self.isOver = true;
                    }
                },self.speed);

                setInterval(function(){},24);
            };

            this.start = function(){
                this.isOver = false;
                if(this.isOver || this.timer != null) return false;
                this._drawProgress();
            };
            this._clear = function(){
                this.context.clearRect(0,0,200,200);
            };
            this.clear = function(isStop){
                if(isStop) {
                    clearInterval(self.timer);
                    this.isOver = true;
                    this.draw_deg = 2;
                }
                this._clear();
            }
        };
        var es = document.getElementsByClassName('canvas');
        var eles = [];
        eles.push(new PC(es[0],{progress:35}));
        eles.push(new PC(es[1],{progress:75}));
        eles.push(new PC(es[2],{progress:90}));

        document.getElementById('btnDraw').onclick = function(){
            console.time('start');
            for(var i = 0; i < eles.length; i++){
                eles[i].start();
            }
            console.timeEnd('start');
        };
        document.getElementById('btnClear').onclick = function(){
            for(var i = 0; i < eles.length; i++){
                eles[i].clear(true);
            }
        };
    </script>
</body>
</html>